<script setup>

//搜素
import {ref} from "vue";
import {searchGoods} from "@/api/goods.js";
import {ElMessage} from "element-plus";

const searchGoodsInfo = ref({
  goodsName: '',
})
const searchGoodsFun = async ()=>{
  let result = await searchGoods(searchGoodsInfo.value.goodsName)
  if (result.data.code == 200) {
    ElMessage.success('搜索成功')
    console.log(result.data.data)
  }else {
    ElMessage.error('搜索失败')
  }
}
const resetSearchGoodsFun = ()=>{
  searchGoodsInfo.value.goodsName = ''
}
</script>

<template>
  <div>
    <div class="search_bar clearfix">
      <a href="/index" class="logo fl">
        <img src="../assets/img/user-consumer/jmlogo.png" class="index-logo">
      </a>
      <div class="search_con fl my-search">
        <button class="input_btn input_btn01 fr my-search-btn" @click="resetSearchGoodsFun">重置</button>
        <input type="text" class="input_text fl" name="name" placeholder="搜索商品" v-model="searchGoodsInfo.goodsName">
        <button class="input_btn fr my-search-btn" @click="searchGoodsFun">搜索</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.index-logo {
  width: 100px;
  height: 40px;
}
.my-search {
  border: #2d65d1 2px solid;
}
.my-search .my-search-btn, .my-fl {
  background-color: #2d65d1;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.input_btn01 {
  position: absolute;
}
.input_text {
  padding-left: 70px;
  box-sizing: border-box;
}
</style>
